<template>
  <page class="product">
    <div class="back-group">
      <v-back />
      <div class="search-group">
        <div class="input-group">
          <van-icon name="search" class="search-icon" />
          <div class="input">
            <input
              type="text"
              placeholder="产品名称"
              v-model="moreSearch.name"
            />
          </div>
        </div>
        <div class="search-btn-group">
          <a href="javascript: void (0)" class="search-btn" @click="getProduct"
            >搜索</a
          >
          <van-icon
            v-if="isFilter"
            class-prefix="iconfont"
            name="filter"
            class="filter-icon"
            @click="show = !show"
          />
        </div>
      </div>
    </div>
    <!-- <div class="search-result" v-if="isFilter">
      已选：{{ types[parseInt(radio)] }}/{{ repaymentName }}
    </div> -->
    <div style="padding: 5px"></div>
    <v-refresh
      ref="refresh"
      class="scroll"
      @on-refresh="onRefresh"
      @on-load="loadmore"
    >
      <template v-for="item in productList">
        <business :item="item" @handleApply="handleApply" />
      </template>
    </v-refresh>

    <van-popup v-model="show" position="top" :style="{ marginTop: '50px' }">
      <div class="popup-content">
        <!-- <div class="popup-item top">
          <label class="label">品类</label>
          <div>
            <van-radio-group v-model="radio">
              <van-radio name="0">
                <template #icon="scope">
                  <van-icon
                    class-prefix="iconfont"
                    name="radio"
                    size="22px"
                    :color="scope.checked ? '#0B56A6' : '#ccc'"
                  />
                </template>
                全部品类
              </van-radio>
            </van-radio-group>
            <van-radio-group
              style="margin-top: 15px"
              v-model="radio"
              direction="horizontal"
            >
              <van-radio name="2">
                <template #icon="scope">
                  <van-icon
                    class-prefix="iconfont"
                    name="radio"
                    size="22px"
                    :color="scope.checked ? '#0B56A6' : '#ccc'"
                  />
                </template>
                税贷
              </van-radio>
              <van-radio name="1">
                <template #icon="scope">
                  <van-icon
                    class-prefix="iconfont"
                    name="radio"
                    size="22px"
                    :color="scope.checked ? '#0B56A6' : '#ccc'"
                  />
                </template>
                票贷
              </van-radio>
              <van-radio name="3">
                <template #icon="scope">
                  <van-icon
                    class-prefix="iconfont"
                    name="radio"
                    size="22px"
                    :color="scope.checked ? '#0B56A6' : '#ccc'"
                  />
                </template>
                抵押贷
              </van-radio>
            </van-radio-group>
          </div>
        </div> -->

        <div class="popup-item center">
          <label class="label">是否推荐</label>
          <div class="select-group">
            <span>{{ repaymentName1 }}</span>
            <van-icon name="arrow-down" @click="showRepayment1 = true" />
          </div>
        </div>
        <div class="popup-item center">
          <label class="label">进件类型</label>
          <div class="select-group">
            <span>{{ repaymentName2 }}</span>
            <van-icon name="arrow-down" @click="showRepayment2 = true" />
          </div>
        </div>
        <div class="popup-item center">
          <label class="label">产品类型</label>
          <div class="select-group">
            <span>{{ repaymentName3 }}</span>
            <van-icon name="arrow-down" @click="showRepayment3 = true" />
          </div>
        </div>
        <div class="popup-item center">
          <label class="label">产品区域</label>
          <div class="select-group">
            <span>{{ repaymentName4 }}</span>
            <van-icon name="arrow-down" @click="showRepayment4 = true" />
          </div>
        </div>
        <div class="popup-item center">
          <label class="label">还款方式</label>
          <div class="select-group">
            <span>{{ repaymentName5 }}</span>
            <van-icon name="arrow-down" @click="showRepayment5 = true" />
          </div>
        </div>
        <div class="popup-item center">
          <label class="label">使用群体</label>
          <div class="select-group">
            <span>{{ repaymentName6 }}</span>
            <van-icon name="arrow-down" @click="showRepayment6 = true" />
          </div>
        </div>

        <div class="btn-group">
          <a href="javascript: void (0)" class="close" @click="show = false"
            >关闭</a
          >
          <a href="javascript: void (0)" class="submit" @click="submit">确定</a>
        </div>
      </div>
    </van-popup>

    <!-- 是否推荐 -->
    <van-popup
      v-model="showRepayment1"
      position="bottom"
      :style="{ marginTop: '50px' }"
    >
      <div class="popup-content">
        <template v-for="item in options1">
          <div class="popup-item">
            <a
              class="popup-item-a"
              href="javascript: void (0)"
              @click="setRepayment1(item)"
              >{{ item.name }}</a
            >
          </div>
        </template>
      </div>
    </van-popup>

    <!-- 进件类型 -->
    <van-popup
      v-model="showRepayment2"
      position="bottom"
      :style="{ marginTop: '50px' }"
    >
      <div class="popup-content">
        <template v-for="item in options2">
          <div class="popup-item">
            <a
              class="popup-item-a"
              href="javascript: void (0)"
              @click="setRepayment2(item)"
              >{{ item.name }}</a
            >
          </div>
        </template>
      </div>
    </van-popup>

    <!-- 产品类型 -->
    <van-popup
      v-model="showRepayment3"
      position="bottom"
      :style="{ marginTop: '50px' }"
    >
      <div class="popup-content">
        <template v-for="item in options3">
          <div class="popup-item">
            <a
              class="popup-item-a"
              href="javascript: void (0)"
              @click="setRepayment3(item)"
              >{{ item.name }}</a
            >
          </div>
        </template>
      </div>
    </van-popup>

    <!-- 还款方式 -->
    <van-popup
      v-model="showRepayment5"
      position="bottom"
      :style="{ marginTop: '50px' }"
    >
      <div class="popup-content">
        <template v-for="item in options5">
          <div class="popup-item">
            <a
              class="popup-item-a"
              href="javascript: void (0)"
              @click="setRepayment5(item)"
              >{{ item.name }}</a
            >
          </div>
        </template>
      </div>
    </van-popup>

    <!-- 使用群体 -->
    <van-popup
      v-model="showRepayment6"
      position="bottom"
      :style="{ marginTop: '50px' }"
    >
      <div class="popup-content">
        <template v-for="item in options6">
          <div class="popup-item">
            <a
              class="popup-item-a"
              href="javascript: void (0)"
              @click="setRepayment6(item)"
              >{{ item.name }}</a
            >
          </div>
        </template>
      </div>
    </van-popup>

    <v-address
      :show="showRepayment4"
      @cancel="showRepayment4 = false"
      @confirm="onFinish"
    ></v-address>
  </page>
</template>

<script>
import business from "@/components/business.vue";
import vRefresh from "@/components/refresh";
import vAddress from "@/components/address";

export default {
  name: "product",
  components: { business, vRefresh, vAddress },
  data() {
    return {
      types: ["全部品类", "票贷", "税贷", "抵押贷"],
      isFilter: true,
      // isFilter: false,
      show: false,
      showRepayment: false,
      showRepayment1: false,
      showRepayment2: false,
      showRepayment3: false,
      showRepayment4: false,
      showRepayment5: false,
      showRepayment6: false,
      radio: "0",
      value: "产品名称",
      productList: [],
      repaymentName: "全部还款方式",
      repaymentName1: "",
      repaymentName2: "",
      repaymentName3: "",
      repaymentName4: "",
      repaymentName5: "",
      repaymentName6: "",
      listFilter: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      repaymentType: [],
      moreSearch: {
        type: "",
        repaymentTypeId: "",
        productName: "",
      },
      options: [],
      fieldNames: {
        text: "label",
        value: "value",
        children: "children",
      },
      cascaderValue: [],
      options1: [
        {
          id: "3",
          name: "推荐产品",
        },
        {
          id: "0",
          name: "默认产品",
        },
      ],
      options2: [
        {
          id: "抵押",
          name: "抵押",
        },
        {
          id: "信贷",
          name: "信贷",
        },
      ],
      options3: [],
      options5: [],
      options6: [
        {
          id: "0",
          name: "无限制",
        },
        {
          id: "1",
          name: "个人",
        },
        {
          id: "2",
          name: "企业",
        },
      ],
    };
  },
  created() {
    // this.isFilter = this.$route.params.filter == 'all';
    this.getpayment();
    this.getProduct(true);
    this.getArea();
    this.getProductTypeList();
    this.getProductrepayment();
    
  },

  methods: {
    // 获取产品类型
    async getProductTypeList() {
      const res = await this.$http.get("/system/dict/data/type/product_type");
      this.options3 = res.data.map((item) => {
        return {
          id: item.dictLabel,
          name: item.dictLabel,
        };
      });
    },
        // 获取还款方式
        async getProductrepayment() {
      const res = await this.$http.get("/system/dict/data/type/repayment");
      this.options5 = res.data.map((item) => {
        return {
          id: item.dictLabel,
          name: item.dictLabel,
        };
      });
    },
    onFinish(value) {
      // console.log(value[2].id);
      this.repaymentName4 = value[2].name;
      this.moreSearch.areaIds = value[2].id;
      this.showRepayment4 = false;
    },
    //获取地址
    async getArea() {
      const res = await this.$http.get("/area/tree");
      // console.log(res);
      this.options = res.data;
    },
    //获取还款方式
    async getpayment() {
      const res = await this.$http.get("/common/mp/select/repaymentType");
      console.log(res);
      this.repaymentType = res.data;
    },

    //获取产品列表
    async getProduct(refresh) {
      this.$loading();
      try {
        const res = await this.$http.post("/product/list", {
          ...this.listFilter,
          ...this.moreSearch,
        });

        if (refresh) {
          try {
            document.querySelector(".scroll").scrollTop = 0;
          } catch (e) {}
        }

        this.$refs.refresh.close(
          res.data.total,
          res.data.total <= this.listFilter.pageNum * this.listFilter.pageSize
        );

        if (refresh) {
          return (this.productList = res.data.records);
        }
        this.productList = this.productList.concat(res.data.records);
        this.total = res.data.total;
      } catch (e) {
      } finally {
        this.$loading.close();
      }
    },
    //是否推荐
    setRepayment1(item) {
      this.repaymentName1 = item.name;
      this.moreSearch.recommendOrHot = item.id;
      this.showRepayment1 = false;
    },
    // 进件类型
    setRepayment2(item) {
      this.repaymentName2 = item.name;
      this.moreSearch.submitType = item.id;
      this.showRepayment2 = false;
    },
    // 产品类型
    setRepayment3(item) {
      this.repaymentName3 = item.name;
      this.moreSearch.type = item.id;
      this.showRepayment3 = false;
    },
    // 还款方式
    setRepayment5(item) {
      this.repaymentName5 = item.name;
      this.moreSearch.repayType = item.id;
      this.showRepayment5 = false;
    },
    // 进件类型
    setRepayment6(item) {
      this.repaymentName6 = item.name;
      this.moreSearch.canUse = item.id;
      this.showRepayment6 = false;
    },

    async submit() {
      this.show = false;
      this.listFilter.pageNum = 1;
      this.getProduct(true);
    },

    async loadmore() {
      this.listFilter.pageNum++;
      await this.getProduct();
    },

    //下拉刷新
    async onRefresh(close) {
      this.radio = "0";
      this.listFilter.pageNum = 1;
      this.moreSearch = {
        // type: "",
        // repaymentTypeId: "",
        // productName: "",
      };

      await this.getProduct(true);
    },

    handleApply(item) {
      this.$router.push(`/productDetail/${item.id}`);
    },
  },
};
</script>

<style scoped lang="less">
.product {
  background: #fafbfd;

  .popup-content {
    padding: 10px @padding;

    .popup-item {
      display: flex;
      border-bottom: 1px solid @border-color;
      padding: @padding 0;

      &-a {
        flex: 1;
      }

      &.top {
        align-items: flex-start;
      }

      &.center {
        align-items: center;
      }

      .label {
        width: 0.86rem;
        font-size: @larger;
        margin-right: @padding;
      }

      .select-group {
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding-right: @padding;

        span {
          color: @theme-color;
          font-size: @md;
        }

        i {
          font-size: 18px;
          color: @theme-color;
        }
      }
    }

    .btn-group {
      display: flex;
      align-items: center;
      margin-top: @padding;

      a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: @big;
        height: 0.48rem;
        border-radius: 4px;

        &.close {
          border: 1px solid #e5e5e5;
          background-color: #fff;
        }

        &.submit {
          border: 1px solid @theme-color;
          margin-left: @padding;
          color: #fff;
          background-color: @theme-color;
        }
      }
    }
  }

  .back-group {
    background-color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3000;

    .search-group {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding-right: 10px;

      .input-group {
        border: 1px solid #1677ff;
        flex: 1;
        display: flex;
        align-items: center;
        border-radius: 30px;
        padding-left: 5px;

        .search-icon {
          color: #999;
          font-size: 20px;
          margin-right: 5px;
        }

        .input {
          height: 30px;
          flex: 1;

          input {
            width: 100%;
            outline: none;
            border: none;
            height: 30px;
            background-color: transparent;
            caret-color: @theme-color;

            &::placeholder {
              color: #999;
            }
          }
        }
      }

      .search-btn-group {
        display: flex;
        align-items: center;
        justify-content: center;

        .search-btn {
          font-size: @md;
          color: #1677ff;
          margin-left: 10px;
        }

        .filter-icon {
          font-size: 22px;
          margin-left: 10px;
          color: @theme-color;
        }
      }
    }
  }

  .search-result {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: @theme-color;
    font-size: @mini;
  }

  .scroll {
    height: calc(100% - 70px);
    overflow-y: auto;
  }
}
</style>
